<template>
  <div class="activity-card" @click="handleCardClick">
    <div class="activity-card__container">
      <!-- 活动图片 -->
      <div class="activity-card__image">
        <img :src="activity.coverImg" :alt="activity.title" />
        <div v-if="isUpcoming" class="activity-card__upcoming-tag">{{ $t('activity.toStart') }}</div>
      </div>
      
      <!-- 活动信息 -->
      <div class="activity-card__content">
        <div class="activity-card__title">{{ activity.title }}</div>
        <!-- 活动时间 -->
        <div class="activity-card__time">
          {{ $t('course.lecturer') }} ：{{ activity.lecturer }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import dayjs from 'dayjs';
import { useI18n } from 'vue-i18n';
// import StatusTag from './StatusTag.vue';

const { t } = useI18n()
// 定义活动数据类型
interface Activity {
  id: string | number;
  title: string;
  coverImage: string;
  startTime: string | Date;
  endTime: string | Date;
}

// 定义组件属性
const props = defineProps<{
  activity: Activity;
}>();

const router = useRouter();

// 判断活动是否即将开始（一周内）
const isUpcoming = computed(() => {
  const now = dayjs();
  const startDate = dayjs(props.activity.startTime);
  
  const diffMinutes = startDate.diff(now, 'minute');
  const sevenDaysInMinutes = 7 * 24 * 60;
  
  // 未开始且在7天内的活动显示"即将开始"
  return diffMinutes > 0 && diffMinutes < sevenDaysInMinutes;
});

// 处理卡片点击事件
const handleCardClick = () => {
  // 使用window.open在新窗口打开活动详情页
  window.open(`/course/${props.activity.id}`, '_blank');
};

</script>

<style scoped lang="scss">
.activity-card {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  &__container {
    padding: 16px;
  }
  :hover {
    .activity-card__title {
      color: #2951E0;
      text-decoration: underline;
    }
  }
}

.activity-card__content {
  margin-top: 24px;
}

.activity-card__image {
  position: relative;
  width: 100%;
  height: 145px;
  overflow: hidden;
  border-radius: 8px;
}

.activity-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-card__upcoming-tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: 600;
  border-radius: 8px 0 8px 0;
  z-index: 1;
  font-size: 12px;
}

.activity-card__title {
  font-size: 20px;
  font-weight: 600;
  color: #252B3A;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.activity-card__time {
  color: #9C9DB4;
  margin-bottom: 8px;
  margin-top: 8px;
}

.activity-card__type {
  display: flex;
  align-items: center;
  height: 20px;
  margin-bottom: 12px;
}

.activity-card__details {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #2951E0;
  line-height: 20px;
  svg {
    color: #2951E0!important;
  }
  &.activity-card__details-color {
    color: #BCBCD0;
    svg {
      color: #BCBCD0!important;
    }
  }
}
</style>